// 业务:两类

// 如果是编辑文章
// 1. xxTitle = "修改文章"
// 2. 表单数据要显示
// else {
// xxTitle = "写文章"
// 发表文章的逻辑
// }
// TODO== 将来由列表的编辑按钮点击进入到此页时,判断是否有文章ID
let ID = 0

// 获取文章分类
getCateList((res) => {
  // console.log(res)
  const dataSelect = res.data.data
  dataSelect.forEach((item) => {
    let optionStr = `<option value=${item.Id} lay-verify="cate">${item.name}</option>`
    $('select[name=cate_id]').append(optionStr)
    // 手动更新表单元素
    layui.form.render('select', 'edit')
  })
})

// 富文本编辑器的初始化
initEditor()
// 选择图片的插件配置
let cropper
function initCropper() {
  // 1. 集成裁剪插件
  const image = document.getElementById('image') // 获取到要被添加裁剪插件的图片
  cropper = new Cropper(image, {
    aspectRatio: 1, // 横纵比例
    preview: $('.img-preview'),
  })
}
initCropper()

// 最后一定是提交表单=>form格式确定=>看接口文档=>提交时参数说明

$('.layui-form').on('submit', (e) => {
  e.preventDefault()
  // 处理表单数据
  //   title
  //   cate_id
  //   content
  //   cover_img
  //   state
  // 富文本编辑器的数据
  let htmlStr = tinyMCE.activeEditor.getContent()
  // 图片blob
  let canvas = cropper.getCroppedCanvas({
    width: 100,
    height: 100,
  })

  // 后台要的是FormData数据类型(内容载体)

  let fd = new FormData($('.layui-form')[0])
//   fd.forEach((value, key) => {
//     console.log(key, value)
//   })


  // 包装成formData格式
  fd.set('content', htmlStr) 
  // set(设置值) 
  // append(新增) 从无到有
            
  // 把canvas -> File(Blob)文件对象 (异步任务)


  canvas.toBlob(function (blobObj) {
    // console.log(blobObj)
    fd.append('cover_img', blobObj)
    // console.log(fd) // {}
    // 测试fd的内容====>

    // fd.forEach((value, key) => {
    //   console.log(key, value)
    // })

    // 发送请求
    if (ID) {
      // 根据文章id编辑文章
    } else {
      // 发布新文章
      postArticleAdd(fd, (res) => {
        //   console.log(res)
        // 进入文章列表
        setTimeout(() => {
          window.location.href = '../list/list.html'
        }, 800)
      })
    }
  })

  // 请求



})

// layui的坑1
// layui的框架分类=>经典模块化框架
// 底层机制不是 双向绑定机制   =>    非经典模块化框架是双向绑定机制!!!
// =>  非经典模块化框架 => 新框架有双向绑定机制 =>  比如vue.js
// => 双向绑定机制=> M变化V自动变,V变化M跟着变
// M 数据 dataSelect
// V 视图 用户的操作(比如选择了某option)

// 但是没有关系，
// 你只需要执行 form.render(type, filter); 方法即可。

// 小扩展
// lib里的某个包的源码=>.map文件
// xxoo.min.js => 注释位置 使用了下面的名字 => 编译过程中 排查到 map文件缺失=>warning
// xxoo.min.map.js

// xx的map文件=> map文件映射  =>  把开发文件映射成对应map文件=>  用来调试的
// let newarr = [1,2,3].map((item)=>{
//     return item + 1
// })
// newarr = [2,3,4]

// map=>webpack打包工具=>vue阶段


// 小复习(小扩展) => 异步队列

//   console.log(1);
//   setTimeout(() => {
//       console.log(2);
//   }, 0);
//   // 主路 =>  更新UI页面 => 
//   // 辅路 =>  任务队列 => 所有的异步任务(定时器,事件,ajax)
//   console.log(3);
//   // 1 3 2